import React from "react";
import * as PropTypes from "prop-types";
import WebFont from "../../base/Font";
import Item from "./Item";

export default class Unit extends React.Component
{
    /**
     * 菜单是否展开
     */
    active = false;

    /**
     * 默认属性
     */
    static defaultProps =
    {
        active : false,
        icon : "",
        title : "",
        items : []
    };

    static propTypes =
    {
        active : PropTypes.bool,
        icon : PropTypes.string.isRequired,
        title : PropTypes.string,
        items : PropTypes.array.isRequired
    };

    constructor (props, context, updater)
    {
        super(props, context, updater);
        this.active = !!props.active;

        this.handleActive();
    }

    handleActive ()
    {
        let state;

        if (true === this.active) {
            state = {className:"menu-fold-unit active", icon:"angle-up"};
        } else {
            state = { className : "menu-fold-unit", icon : "angle-down"};
        }

        if (undefined === this.state) {
            this.state = state;
        } else {
            this.setState(state);
        }
    }

    handleClick = () =>
    {
        this.active = !this.active;
        this.handleActive();
    };

    render ()
    {
        return (<div className={this.state.className}>
            <div onClick={this.handleClick}>
                <WebFont icon={this.props.icon} style={{marginRight:"5px"}}/>
                {this.props.title}
                <WebFont icon={this.state.icon} class={"angle"} prefix={"fas"}/>
            </div>

            <ul>
                {this.props.items.map((value, index)=><Item key={index} url={value.url} title={value.title}/>)}
            </ul>
        </div>);
    }
}